<template>
  <div>
    <div class="search">
      <el-form inline label-width="80px" @keyup.enter.native="searchByCondition">
        <el-form-item label="用户名">
          <el-input v-model="params.username" class="search-item">
          </el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="params.success" clearable class="search-item">
            <el-option label="失败" :value="0"></el-option>
            <el-option label="成功" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="searchByCondition">查询</el-button>
          <el-button type="primary" size="small" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="data" v-loading="loading">
      <el-table  :data="data.records">
        <el-table-column prop="username" label="用户名" width="150"> </el-table-column>
        <el-table-column prop="loginTime" label="登录时间" width="170"> </el-table-column>
        <el-table-column prop="success" label="状态" width="100">
          <template slot-scope="scope">
            <el-tag :type="scope.row.success ? 'success' : 'danger'">
              {{ scope.row.success ? '成功' : '失败' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="failureReason" label="失败原因" width="150"> </el-table-column>
        <el-table-column prop="platform" label="平台" width="100"> </el-table-column>
        <el-table-column prop="hostname" label="主机名" width="150"> </el-table-column>
        <el-table-column prop="hostUsername" label="主机用户名" width="150"> </el-table-column>
        <el-table-column prop="ipv4" label="IPv4" width="150"> </el-table-column>
        <el-table-column prop="mac" label="MAC" min-width="150" width="auto"> </el-table-column>
      </el-table>
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="$config.defaultPageSizeOpts"
        :page-size="size"
        layout="total, sizes, prev, pager, next"
        :total="data.total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { mapActions } from 'vuex'

export default {
  name: 'LoginLog',
  components: { },
  data() {
    return {
      data: {},
      params: {},
      form: {},
      current: 1,
      size: 10,
      loading: false
    }
  },
  methods: {
    ...mapActions(['GetLoginLogPage']),
    search() {
      this.params.current = this.current
      this.params.size = this.size
      this.loading = true
      this.GetLoginLogPage(this.params).then(res => {
        this.loading = false
        if (res) {
          this.data = res
        }
      }).catch(() => {
        this.loading = false
      })
    },
    reset() {
      this.params = {}
      this.current = 1
    },
    searchByCondition() {
      this.current = 1
      this.search()
    },
    handleSizeChange(val) {
      this.size = val
      this.search()
    },
    handleCurrentChange(val) {
      this.current = val
      this.search()
    }
  },
  mounted() {
    this.search()
  }
}
</script>

<style lang="less" scoped>
  .search {
    .search-item {
      width: 200px;
    }
  }
  .operate {
    float: right;
    operate-item {
      padding: 0 10px;
    }
  }
</style>
